<template>
    <div>
        <div class="row mb-1">
            <div class="col">
                <el-input placeholder="请输入内容" @change="start" v-model.lazy="like">

                </el-input>
            </div>
        </div>
        <div class="row mb-1">
            <div class="col">

                <el-button type="primary" @click="start">
                    查询
                </el-button>

            </div>
        </div>

        <div class="row mb-1">
            <div class="col">
                <el-table :data="tableData" border height="65vh" style="width: 100%" @sort-change="sortchange"
                    @cell-click="userhandleCurrentChange ? () => { } : handleClick" @selection-change="handleChange"
                    :highlight-current-row="!!userhandleCurrentChange" @current-change="userCurrentChange">
                    <el-table-column v-for="v in tableattr" :key="v.label" v-bind="{ ...v }"></el-table-column>
                    <el-table-column label="操作" width="230">
                        <template #default="scope">
                            <router-link class="stretched-link" :to="{ name: '课程', params: { ID: scope.row.ID } }"
                                v-slot="{ navigate }" custom>
                                <el-button type="info" @click="navigate">
                                    查看
                                </el-button>
                            </router-link>

                            <!-- <el-button size="default" @click="IID = scope.row.ID">修改</el-button>
                        <el-button size="default" @click="del(scope.row.ID)" type="danger">删除</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="row mb-1">
            <div class="col">
                <el-pagination :hide-on-single-page="true" @current-change="handleCurrentChange"
                    :page-size="Number(limit)" layout="prev, pager, next" :total="count"></el-pagination>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import {
    computed,
    onMounted,
    reactive,
    ref,
    watch,
} from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { Iobj, asyncmiaoadminselectcourse } from "../../../api";
import { Storekey, TtableU } from "../../../interface";
import Alymodel from "../../../mysql_interface/model";
import study from "../../../mysql_interface/studycodemodel";
import { toLocaleDateString } from "../../../util/time";
import { Team } from "../data";

type KIuser = keyof Alymodel.IMcourse;

const p = defineProps<{ tablekey?: Array<keyof Alymodel.IMcourse>, handleSelectionChange?: (n: Alymodel.IMcourse[]) => void, selectarr?: number[], userhandleCurrentChange?: (n: Alymodel.IMcourse) => void }>()






const _tableattr: TtableU<Alymodel.IMcourse>[] = [
    {
        label: "课程ID",
        prop: "ID",
        sortable: true,
    },
    {
        label: "课程名称",
        prop: "name",
        sortable: true,
    },
    {
        label: "介绍",
        prop: "info",
        sortable: true,
    },
    {
        prop: "createtime",
        label: "创建时间",
        formatter: ({ createtime }) => formatter(createtime),
        sortable: true,
    },
];

const tableattr = computed(() => {
    const tablekey = p.tablekey;
    if (!tablekey) return _tableattr;
    return _tableattr.filter(({ prop }) => {
        if (prop) {
            return tablekey.includes(prop);
        }
    });
});

const dialogVisible = ref(false);
const activeName = ref("详情");
const sortable = ref<"DESC" | "ASC">("DESC");
const IID = ref<number | undefined | boolean>();
const limit = ref(20);
const offset = ref(0);
const order = ref<KIuser>("ID");
const like = ref("");
const title = ref("添加");
const ID = ref<number>();
const context = ref("context");
const ruleForm = reactive<study.Iteam>(Team);
const rules = reactive({});
const isquestionbank = ref(true);
const changeradio = ref("6");
const store = useStore(Storekey);
const packegekey = computed(() => {
    return store.state.packegekey?.rows;
});
const tableData = ref<Alymodel.IMcourse[]>([])

const Tteam = computed(() => {
    if (IID.value) {
        return tableData.value.find((v) => v.ID == IID.value);
    }
    return {};
});

const count = ref(0)

const route = useRoute()


function create() {
    IID.value = undefined;
}

onMounted(() => {
    store.dispatch("actionpackegekey");
    start();
});

async function start() {
    try {
        const obj: Iobj<Alymodel.IMcourse> = {
            _limit: limit.value,
            _offset: offset.value,
            _order: order.value,
            _sortable: sortable.value,
        }
        if (like.value) {
            obj._like = ["name", like.value]
        }

        if (route.query.ID) {
            obj.ID = String(route.query.ID).split(',')
        }
        const data = await asyncmiaoadminselectcourse(obj)
        tableData.value = data.rows
        count.value = data.count
    } catch (e: any) {
        ElMessage.error(e);
    }
}

async function closed() {
    await start();
    IID.value = !IID.value;
}

function handleCurrentChange(val: number) {
    offset.value = limit.value * (val - 1);
}

function sortchange(row: { prop: any; order: string }) {
    const { prop } = row;
    if (row.order == "descending") {
        sortable.value = "DESC";
    } else {
        sortable.value = "ASC";
    }
    order.value = prop;
}
function formatter(updatedAt?: string | number | Date) {
    return toLocaleDateString(updatedAt);
}

function handleChange(data: study.Iteam[]) {
    if (p.handleSelectionChange) p.handleSelectionChange(data);
}

function userCurrentChange(data: study.Iteam) {
    if (p.userhandleCurrentChange) p.userhandleCurrentChange(data);
}

// async function del(ID: any) {
//     ElMessageBox.confirm("确定要删除团队？", "提示").then(async () => {
//         try {
//             await asyncadmindelteam({ ID });
//             ElMessage({
//                 message: "删除成功",
//                 type: "success",
//             });
//             await start();
//         } catch (e: any) {
//             ElMessage({
//                 message: e,
//                 type: "error",
//             });
//         }
//     });
// }
watch(() => [limit.value, offset.value, order.value, sortable.value], () => {
    start()
})

watch(() => like.value, () => {
    limit.value = 20;
    offset.value = 0;
})
</script>